<template>
  <view class="fit">
    <button class="button" type="primary" @click="toggle('center')">
      筛选
    </button>
    <uni-popup ref="popup" background-color="#fff" class="uni-popup">
      <view class="popup-content">
        <view class="sel">
          <uni-section title="筛选条件" type="line">
            <uni-card
              class="uni-body"
              :title="title[k]"
              v-for="(v, k) in condition"
              :key="k"
            >
              <view class="ctag">
                <view v-for="(i, j) in v" :key="j">
                  <uni-tag
                    :inverted="i.isbg"
                    type="primary"
                    style="margin: 5px"
                    :text="i.name"
                    @click="chose(k, i)"
                  ></uni-tag>
                </view>
              </view>
            </uni-card>
          </uni-section>
        </view>
        <button type="primary" size="mini" @click="send()">确定</button>
        <button
          @click="console()"
          style="margin-left: 10px"
          type="default"
          size="mini"
        >
          取消
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "Fit",
  data() {
    return {
      condition: {}, //筛选条件列表
      title: {
        //翻译
        charact: "亮点",
        floor: "楼层",
        orienteds: "朝向",
        price: "价格",
        roomtype: "房型",
      },
      idobj: {
        //翻译参数的健 使其与后台要求一致
        roomtype: "roomTypeID",
        floor: "floor",
        orienteds: "orientedID",
        price: "price",
        charact: "tagsID",
      },
      params: {}, //接收选中参数
    };
  },
  methods: {
    toggle(type) {
      this.type = type;
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open(type);
    },
    async gethousecondition() {
      //请求房屋条件信息
      let res = await this.$api.getHouseCondition();
      if (res.data.code == 200) {
        // this.condition = res.data.msg;
        // console.log(this.condition);
        //初始给每一条数据加状态
        let obj = res.data.msg;
        console.log(obj);
        for (let k in obj) {
          obj[k], //数组
            obj[k].map((i) => {
              i.isbg = true;
            });
        }
        this.condition = obj;
        // console.log(this.condition);
      }
    },
    chose(k, i) {
      console.log(this.idobj[k]); //参数健
      console.log(i.code); //参数值
      //判断我现在的状态
      if (i.isbg) {
        //未选中状态
        //排他思想 让其他的不高亮 自己高亮
        this.condition[k].map((v) => (v.isbg = true));
        i.isbg = false;
        this.params[this.idobj[k]] = i.code;
      } else {
        //高亮
        i.isbg = true;
        //取消选中 删除参数的键值对
        delete this.params[this.idobj[k]];
      }
      // console.log(this.params);
    },
    send() {
      //确定筛选
      console.log(this.params);
      this.$refs.popup.close();
      //把值传给父组件
      this.$emit("success", this.params);
    },
    console() {
      //取消弹出层
      this.$refs.popup.close();
    },
  },
  mounted() {
    this.gethousecondition();
  },
};
</script>

<style lang="scss">
.button {
  width: 100px;
  height: 35px;
  line-height: 35px;
  margin-left: 0;
  background-color: lightskyblue;
}

.popup-content {
  align-items: center;
  justify-content: center;
  padding: 15px;
  width: 300px;
  background-color: #fff;
  height: 100%;
}
.sel {
  height: 600px;
  overflow: auto;
}
.ctag {
  display: flex;
  flex-wrap: wrap;
  // font-size: 30px;
}
.ctag > view {
  margin: 3px;
}
</style>